<<<<<<< HEAD
/* 块元素和行内元素 */

.block {
    background-color: #9acd32;
    width: 300px;
    height: 80px;
    padding-left: 20px;
}

.inline {
    background-color: violet;
    padding-left: 20px;
    height: 100px;
    width: 3000px;
}

.block-inline {
    background-color: blue;
    width: 300px;
    height: 60px;
    display: inline-block;
}


/* 定位 */

.position-box {
    position: relative;
    background-color: turquoise;
    width: 500px;
    height: 300px;
}

.position-box-item {
    background-color: violet;
    width: 200px;
    height: 70px;
}

.position-box-item2 {
    position: relative;
    margin: 20px;
    top: 30px;
    background-color: saddlebrown;
    width: 200px;
    height: 70px;
}

.position-box-item3 {
    position: relative;
    background-color: blueviolet;
    width: 200px;
    height: 70px;
}


/* 浮动 */

.float-box {
    border: 2px solid black;
    padding: 5px;
    background-color: turquoise;
    width: 500px;
    /* height: 200px; */
}

.float-public {
    width: 200px;
    height: 70px;
}

.float-box-left {
    /* position: relative; */
    background-color: blue;
    float: left;
}

.float-box-right {
    position: relative;
    background-color: brown;
    float: right;
}

.float-box::after {
    content: '.';
    display: block;
    height: 0px;
    clear: both;
}


/* 居中 */

.center-box {
    position: relative;
    margin: 0 auto;
    background-color: yellowgreen;
    height: 300px;
    width: 1000px;
    /* 父元素设置 */
    text-align: center;
}

.center-box span {
    line-height: 300px;
    color: blue
}

.center-box div {
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    width: 300px;
    height: 100px;
    background-color: violet;
=======
/* 块元素和行内元素 */

.block {
    background-color: #9acd32;
    width: 300px;
    height: 80px;
    padding-left: 20px;
}

.inline {
    background-color: violet;
    padding-left: 20px;
    height: 100px;
    width: 3000px;
}

.block-inline {
    background-color: blue;
    width: 300px;
    height: 60px;
    display: inline-block;
}


/* 定位 */

.position-box {
    position: relative;
    background-color: turquoise;
    width: 500px;
    height: 300px;
}

.position-box-item {
    background-color: violet;
    width: 200px;
    height: 70px;
}

.position-box-item2 {
    position: relative;
    margin: 20px;
    top: 30px;
    background-color: saddlebrown;
    width: 200px;
    height: 70px;
}

.position-box-item3 {
    position: relative;
    background-color: blueviolet;
    width: 200px;
    height: 70px;
}


/* 浮动 */

.float-box {
    border: 2px solid black;
    padding: 5px;
    background-color: turquoise;
    width: 500px;
    /* height: 200px; */
}

.float-public {
    width: 200px;
    height: 70px;
}

.float-box-left {
    /* position: relative; */
    background-color: blue;
    float: left;
}

.float-box-right {
    position: relative;
    background-color: brown;
    float: right;
}

.float-box::after {
    content: '.';
    display: block;
    height: 0px;
    clear: both;
}


/* 居中 */

.center-box {
    position: relative;
    margin: 0 auto;
    background-color: yellowgreen;
    height: 300px;
    width: 1000px;
    /* 父元素设置 */
    text-align: center;
}

.center-box span {
    line-height: 300px;
    color: blue
}

.center-box div {
    position: absolute;
    transform: translate(-50%);
    left: 50%;
    width: 300px;
    height: 100px;
    background-color: violet;
>>>>>>> 18f12904f3219f094e3589e3deecaea8b285be9b
}